<template>
  <div class="type-switch">
    <a-tabs :default-active-key="acitvekey" @change="activeKeyChange">
      <a-tab-pane v-for="item in props.items.tabtitletype" :key="item.id">
        <template #title>{{ item.name }}</template>
        <query-page
          v-model:selectedKeys="selectedKeys"
          :form-component-config="formComponentConfig"
          :form-render-config="formRenderConfig"
          :form-render-keys="formRenderKeys"
          :table-component-config="tableComponentConfig"
          :table-render-config="tableRenderConfig"
          :table-render-keys="tableRenderKeys"
          :loading="isLoading"
          :data="renderData"
          :total="100"
          row-selection-type="radio"
          @selection-change="selectionChange"
          @query-data="getData"
        >
          <template #container-side>
            <div>container-side 自定义内容</div>
          </template>
          <template #table-header>
            <div class="table-header">table-header 自定义内容</div>
          </template>
          <template #table-side>
            <div class="table-side">table-side 自定义内容</div>
          </template>
          <template #operate="{ record, rowIndex }">
            <div>
              <a-button type="text" @click="showConsole(record, rowIndex)"
                >编辑</a-button
              >
              <a-button type="text" @click="showConsole(record, rowIndex)"
                >详情</a-button
              >
            </div>
          </template>
        </query-page>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, ref, reactive } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';

  import { sleep } from '@/utils/tools';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '@/views/baseComponent/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/baseComponent/tableComp/baseTableConfig';

  const props = defineProps({
    items: {
      type: Array,
      required: true,
    },
  });

  const acitvekey = ref(props.items.tabtitletype[0].id);

  const activeKeyChange = (key: string) => {
    acitvekey.value = key;
  };

  // 当前页面要渲染的查询条件
  const formRenderKeys = ['name', 'like', 'sex', 'age', 'birthday'];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'name',
    'city',
    'salary',
    'address',
    'email',
    'age',
    'remove',
    'operate',
  ];

  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);

  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    await sleep(2000);
    const data = reactive([
      {
        id: 'id-1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com',
      },
      {
        id: 'id-2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com',
      },
      {
        id: 'id-3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com',
      },
      {
        id: 'id-4',
        name: 'Ed Hellen',
        salary: 17000,
        address: '42 Park Road, London',
        email: 'ed.hellen@example.com',
      },
      {
        id: 'id-5',
        name: 'William Smith',
        salary: 27000,
        address: '62 Park Road, London',
        email: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };

  const showConsole = (rowData: object, index: number) => {
    console.log('rowData', rowData);
    console.log('index', index);
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };
</script>

<style lang="less" scoped>
  .type-switch {
    width: 100%;
    height: 100%;
    margin: 8px;
    padding: 12px;
  }
</style>
